본문으로 건너뛰기

타입 변환과 단축평가

작성일 : 2024.10.12

타입 변환​

  1. 명시적 타입 변환 | 타입 캐스팅 : 의도적으로 값의 타입을 변환하는 것
  2. 암묵적 타입 변환 | 타입 강제 변환 : 암묵적으로 타입이 자동으로 변환되는 것

  • 타입 변환 : 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것

    • 에러없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 한번 사용하고 버림

  • 타입 변환의 목적 : 자신과 동료가 예측가능한 코드를 작성해야 한다

암묵적 타입 변환​

문자열 타입​
// 숫자 타입
0 + '' 			// -> "0"
-0 + ''			// -> "0"
1 + ''			// -> "1"
-1 + ''			// -> "-1"
NaN + ''		// -> "NaN"
Infinity + ''	// -> "Infinity"
-Infinity + ''	// -> "-Infinity"

//불리언타입 
true + ''		// -> "true"
false + ''		// -> "false"

//null타입
null + ''		// -> "null"
 
// undefined 타입
undefined + ''	// -> "undefined"

//심벌 타입
(Symbol()) + ''	// -> TypeError : Cannot convert a Symbal value to a string

//객체 타입
({}) + ''		// -> "[object Object]"
Math + ''		// -> "[object Math]"
[] + ''			// -> ""
[10, 20] + ''	// -> "10, 20"
(function(){})  + '' // -> "function(){}"
Array + ''		// -> "function Array(){ [native code] }"
숫자 타입​
  • 객체와 빈 배열이 아닌 배열 undefined는 변환되지 않아 NaN이 된다
// 숫자 타입
+'' 			// -> 0
+'0'			// -> 0
+'1'			// -> 1
+'string'		// -> NaN	

// 불리언 타입
+true			// -> 1
+false			// -> 0

// null 타입
+null			// -> 0 

// undefined 타입
+undefined		// -> NaN	

// 심벌 타입
+Symbol()		// -> TypeError : Cannot convert a Symbal value to a number

// 객체 타입
+{}			// -> NaN
+[]			// -> 0
+[10,20]		// -> NaN	
+(function(){})	// -> NaN
불리언타입​
  • JS 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy값으로 구분
    • Falsy값 항목
      1. false
      2. undefined
      3. null
      4. 0, -0
      5. NaN
      6. '' (빈 문자열)

암묵적 타입 변환​

문자열 타입 변환​
// 1.String 생성자 사용
String(1);
String(NaN);

// 2.Object.prototype.toString 메서드 사용
(1).toString();
(NaN).toString();

// 3.문자열 연결 연산자 사용
1 + '';
NaN + '';
숫자 타입 변환​
// 1. Number 생성자 사용
Number('0');

// 2. parseInt, parseFloat 함수 사용
parseInt('0');
parseFloat('0');

// 3. 산술 연산자 사용
+'0';
+'-1';
'0' * 1;

단축평가​

  • 단축평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
var elem = null;
var value = elem.value;	// TypeError : Cannot read property 'value' of null
var value = elem && elem.value;  // -> null

옵셔널 체이닝 연산자​

  • 옵셔널 체이닝 연산자 ?. : 좌항의 피연산자가 null 또는 undefined인 경우 undefined을 반환하고, 그렇지 않으면 우항의 프로퍼티 참조
var elem = null;
var value = elem.value;	// TypeError : Cannot read property 'value' of null
var value = elem && elem.value;  // -> null
var value = elem?.value;

null 병합 연산자​

  • null 병합 연산자 ?? : 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환, 그렇지 않으면 좌항의 피연산자 반환
var foo = '' || 'default string';
console.log(foo); 	// "default string";

var foo2 = '' && 'default string';
console.log(foo2); 	// "";